<!-- z-paging聊天item -->

<template>
	<view class="tn-flex tn-flex-column tn-p">
		<text class="chat-time" v-if="item.createTime">
			{{ item.createTime }}
		</text>
		<view class="tn-flex tn-flex-row" :class="{ 'tn-flex-row-reverse': isUser, 'tn-text-right': isUser }">
			<view class="tn-mt-sm">
				<tn-icon class="chat-icon" :name="isUser ? 'my' : 'notebook'" color="tn-blue" size="44"></tn-icon>
			</view>
			<view class="chat-content-container">
				<text class="chat-user-name" :class="{ 'chat-location-me': isUser }">
					{{ roleName }}
				</text>
				<view class="tn-flex tn-flex-row" :style="[{ justifyContent: isUser ? 'flex-end' : 'flex-start' }]">
					<view class="chat-text-container" :class="{ 'chat-text-container-me': isUser }">
						<rich-text v-if="item.contentType === 'TEXT' || (isUser && item.contentType === 'IMAGE')"
							class="chat-text" :class="{ 'chat-text-me': isUser }" :nodes="item.content"></rich-text>
						<view v-if="item.contentType === 'IMAGE'" class="tn-flex tn-flex-row tn-flex-wrap"
							v-for="(image, index) in item.imageList" :key="index">
							<TnLazyLoad width="300px" height="300px" class="chat-image" @click="previewImage(image)" :src="image" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import TnLazyLoad from '@tuniao/tnui-vue3-uniapp/components/lazy-load/src/lazy-load.vue'

const props = defineProps({
	item: {
		type: Object,
		default: () => {
			return {
				messageId: '',
				parentMessageId: '',
				role: '',
				content: '',
				contentType: '',
				imageList: [],
				status: '',
				createTime: '',
			}
		}
	}
})

const isUser = computed(() => {
	return props.item.role === 'user'
})

const roleName = computed(() => {
	return props.item.role === 'user' ? '我' : 'AI助手'
})

const previewImage = (image: string) => {
	uni.previewImage({
		urls: [image]
	})
}
</script>

<style scoped>
.chat-time {
	padding: 4rpx 0rpx;
	text-align: center;
	font-size: 22rpx;
	color: #aaaaaa;
}

.chat-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background-color: #eeeeee;
}

.chat-content-container {
	margin: 0rpx 15rpx;
}

.chat-user-name {
	font-size: 26rpx;
	color: #888888;
}

.chat-text-container {
	text-align: left;
	background-color: #f1f1f1;
	border-radius: 8rpx;
	padding: 10rpx 15rpx;
	margin-top: 10rpx;
	/* #ifndef APP-NVUE */
	max-width: 500rpx;
	/* #endif */
}

.chat-text-container-me {
	background-color: #007AFF;
}

.chat-text {
	font-size: 28rpx;
	/* #ifndef APP-NVUE */
	word-break: break-all;
	/* #endif */
	/* #ifdef APP-NVUE */
	max-width: 500rpx;
	/* #endif */
}

.chat-text-me {
	color: white;
}

.chat-image {
	min-width: 100%;
	max-height: 100%;
	border-radius: 8rpx;
}
</style>